<template>
  <scroll-view class="scroll-list" :scroll-y="scrollY" :scroll-top="scrollTop" :scroll-into-view="intoIndex"
    :lower-threshold="lowerThreshold" :scroll-with-animation="true" @scrolltolower="scrolltolower" @scroll="scroll">
    <!--    touchstart 元素初次点击 @touchmove 元素拖动 touchend 离开元素
scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件
-->
    <view class="scrol-common" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <!--            heightY 下拉加载元素高度 transition-->
      <view v-if="refresherEnabled" :style="[{ height: `${heightY}px`, transition: `${transition}` }]"
        class="custom-refresher">
        <view class="custom-refresher-item">
          <view class="custom-refresher-item-load" :style="{
            width: `${widthImg * maxWidthImg}px`,
            transition: `${transition}`,
          }">
            <!-- <cover-image v-show="height != heightY" class="image-style" :src="urlImg" ></cover-image>

                        <cover-image v-show="height == heightY" class="image-style" :src="caseGif" ></cover-image> -->
            <!-- <u-loading-icon></u-loading-icon> -->
            <!-- 下拉加载 -->
            <i class="flex_center">
              <img src="@/static/image/scrollList/pull_down_loading.png" alt="">
            </i>
          </view>
        </view>
      </view>
      <!-- 滑动内容展示 -->
      <slot></slot>

      <view class="period" v-show="page.status == 'period' && page.total == 0">
        <view class="period-item po">
          <img :src="noData" class="period-item-img" />
          <view class="period-item-text">{{ onDataTest }}</view>
        </view>
      </view>
      <!--上拉加载-->
      <view v-if="scrollType" @click="loadmore" class="loading">
        <!-- <u-loading-icon size="20" v-show="page.status == 'loading'" mode="circle" :text="loadingText">
        </u-loading-icon> -->
        <!-- 加载中 -->
        <template v-if="page.status == 'loading'">
          <div class="flex_center flex_column first_loading">
            <img src="@/static/image/scrollList/loading1.png" alt="">
            <span>内容加载中，请稍后...</span>
          </div>
        </template>
        <view class="f22 ptb20" v-show="page.status != 'loading'">
          <!-- @click="groupEntry" -->
          <view class="listLoadingImg flex_center" v-if="page.total != 0 && page.status == 'period'" >
            <!-- <img src="@/static/image/listLoadingImg.png" alt="" /> -->
            — 到底啦 —
          </view>
          <template v-else>
            {{ loadingText }}
          </template>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: "scroll-list",
  data() {
    return {
      scrollY: true,

      pageY: 0, //初次点击高度
      scroolTop: 0, //当前滚动距离,
      webScrollTop: 0, //页面滚动距离
      heightY: 0, //滚动高度
      transition: "none", // .3s ease all

      widthImg: 20,
      maxWidthImg: 1,
      urlImg: "@/static/image/scrollList/caseImg.png",
      caseGif: "@/static/image/scrollList/caseGif.gif",
    };
  },
  props: {
    //滚动高度
    scrollTop: {
      type: Number,
      default: 0,
    },
    intoIndex: {
      type: String,
      default: "",
    },
    //分页条件
    page: {
      type: Object,
      default: () => {
        return {
          pageSize: 20,
          pageNum: 1,
          total: 0, //总条数
          pageTotal: 0, //当前条数
          //loading 加载中 loadmore 加载 error
          // 错误 period 加载完毕 ，
          status: "loading",
        };
      },
    },
    //距底部/右边多远时（单位px），触发 scrolltolower 事件
    lowerThreshold: {
      type: Number,
      default: 50,
    },

    //下拉刷新展示高度
    height: {
      type: Number,
      default: 80,
    },
    /*外部处理初始化下拉刷星*/
    reset: {
      type: Boolean,
      default: true,
    },
    /*是否开启下拉刷新*/
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    /*是否开启上拉刷新数据*/
    scrollType: {
      type: Boolean,
      default: false,
    },
    // 到底了的文字描述
    whether: {
      type: String,
      default: "到底啦",
    },
    // 到底了的图片展示
    noData: {
      type: String,
      default: require("@/static/image/scrollList/noData.png"),
    },
    // 无数据标语
    onDataTest: {
      type: String,
      default: "空空如也",
    },
  },
  watch: {
    page: {
      handler(newName, oldName) {
        // console.log(newName);
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    loadingText() {
      let status = this.page.status;
      console.log(this.page);
      let text =
        status == "loading"
          ? "加载中..."
          : status == "loadmore"
            ? "点击加载"
            : status == "error"
              ? "加载失败"
              : status == "period" && this.page.total != 0
                ? this.whether
                : "";

      return text;
    },
  },
  methods: {
    groupEntry() {
      this.$functions.showWaiting();
      this.$api.sys.getSysDictJoinGroupLink().then((e) => {
        const { linkType, linkUrl } = e.data;
        if (linkType == 1) {
          //内链
          this.$functions.goAppInternalLinks(linkUrl, () => {
            location.href = linkUrl;
          });
        } else {
          //外链
          this.$functions.goAppWebPage(linkUrl);
        }
      });
    },
    touchstart(item) {
      /*开启下拉刷新加载*/
      if (!this.refresherEnabled) return;
      //当前页面高度和默认值一致同时 scrollY允许滚动为false时窗口不可改变高度
      if (!this.scrollY && this.heightY == this.height) return;
      //清除动态效果
      this.transition = "none";
      this.scroolTop = 0;
      //获取第一次触发的时候的高度
      this.pageY = item.changedTouches[0].pageY;
    },
    touchmove(item) {
      /*开启下拉刷新加载*/
      if (!this.refresherEnabled) return;

      //当前页面高度和默认值一致同时 scrollY允许滚动为false时窗口不可改变高度
      if (!this.scrollY && this.heightY == this.height) return;
      //获取当前滚动距离
      this.scroolTop = item.changedTouches[0].pageY;

      //页面上拉
      if (this.scroolTop > this.pageY) {
        this.heightY = (this.scroolTop - this.pageY) / 3;
        // 图片大小
        this.maxWidthImg = 1 + (this.scroolTop - this.pageY) / 100;
      }
    },
    //离开元素判断当前结束高度
    touchend(item) {
      /*开启下拉刷新加载*/
      if (!this.refresherEnabled) return;

      //清除滚动
      //添加动态效果
      this.transition = ".3s ease all";
      //高度
      this.scroolTop = 0;
      //当前页面高度和默认值一致同时 scrollY允许滚动为false时窗口不可改变高度
      if (!this.scrollY && this.heightY == this.height) return;

      //离开元素事的pageY数据
      var pageY = item.changedTouches[0].pageY;
      this.scrollY = true;

      /*
       webScrollTop == 0 说明页面才是滚动到顶部 才能触发下拉刷新。
      */
      if (this.height < this.heightY && this.webScrollTop <= 10) {
        //当结束滚动高度大于height时
        this.heightY = this.height;
        // this.scrollY = false;

        this.maxWidthImg = 1 + this.height / 100;

        //初始化
        if (!this.reset) {
          this.resetStyle();
        } else {
          this.$emit("query", "");
        }
      } else {
        this.heightY = 0;
      }
    },
    /*滚动触发*/
    scroll(item) {
      const { scrollTop } = item.detail;
      this.webScrollTop = scrollTop;
      this.$emit("scroll", item);
    },
    //点击触发
    loadmore() {
      /*当前为loadmore是点击加载*/
      if (this.page.status == "loadmore") {
        let page = { ...this.page };
        page.pageNum += 1;
        page.state = "loading";
        this.$emit("update:page", page);
        this.$emit("loadmore", page); //触发loading加载事件
      } else if (this.page.status == "error") {
        /*当数据错误时不改变分页-加载当前页*/
        this.$emit("loadmore", this.page);
      }
    },
    //重置下拉刷新属性
    resetStyle() {
      if (this.reset) {
        this.scrollY = true;
        this.scroolTop = 0;
        this.heightY = 0;
      }
    },
    //到底触发、点击触发
    scrolltolower() {
      // debugger
      if (!this.scrollType) return;

      let page = { ...this.page };

      //当前条数
      if (page.total <= page.pageTotal) {
        page.state = "period";
        this.$emit("update.page", page);
        return;
      }

      /*只有为可点击时可下拉触发下拉加载*/
      if (page.status == "loadmore" && page.total > page.pageTotal) {
        page.pageNum += 1;
        /*改变状态-判定为加载中*/
        page.state = "loading";
        this.$emit("update:page", page);
        this.$emit("loadmore", page); //触发loading加载事件
      }
    },
  },
};
</script>

<style lang="scss">
.scroll-list {
  width: 100%;
  height: 100%;

  .scrol-common {
    position: relative;
    min-height: 100%;

    .custom-refresher {
      display: flex;
      justify-content: center;
      overflow: hidden;
      align-items: flex-end;

      &-item {
        /*      align-self: flex-end;*/
        text-align: center;
        font-size: 24rpx;

        &-load {
          position: relative;

          .image-style {
            width: 100%;
          }
        }
      }
    }
  }
}

.loading {
  font-size: 30rpx;
  text-align: center;
  color: rgb(144, 147, 153);
  padding-bottom: 20rpx;
  height: 100%;
}

.period {
  height: 100%;
  width: 100%;
  font-size: 24rpx;
  color: rgba(34, 34, 34, 0.4);

  .period-item {
    /*margin: auto;*/
    align-self: center;
    text-align: center;

    &-img {
      width: 264rpx;
    }

    &-text {
      margin-top: 40rpx;
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #656565;
    }
  }
}

.custom-refresher-item-load {
  padding: 10rpx 0;
  position: relative;
  i {
    width: 144rpx;
    position: absolute;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
  }
}

.listLoadingImg {
  font-size: 28rpx;
  color: #aaa;

  img {
    width: 256rpx;
  }
}

.first_loading {
  // position: absolute;
  // left: 50%;
  // top: 50%;
  padding: 50rpx 0;
  // transform: translate(-50%, -50%);

  img {
    width: 144rpx;
  }

  span {
    margin-top: 40rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #656565;
  }
}
</style>
